<template>
  <article class="innerPage homePage">
    <header class="header_post">
      <p>主页</p>
      <button>
        <img src="../../../assets/img/icon_refresh@2x.png" /><span>刷新</span>
      </button>
    </header>
    <nav class="nav_post">
      <div v-for="(item, index) in navList" :key="index" class="nav_size">
        <div @click="fuunto(item.pageTurn)">
          <el-badge :value="item.num" :hidden="item.num == 0" class="item">
            <div :style="{ background: item.bgColor }" class="nav_iocn">
              <img :src="item.icon" />
            </div>
          </el-badge>

          <p>{{ item.label }}</p>
        </div>
      </div>
    </nav>
    <section class="graphical">
      <header><i></i> <span>访问统计</span></header>
      <ul class="filterBar">
        <li>
          <span>选择时间</span>
          <el-select v-model="datatime" placeholder="请选择" @change="timsfa">
            <el-option
              v-for="item in datatimeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
      </ul>
      <!-- <p class="echars_text">2021年公众号总访问量：1516364次</p> -->
      <div class="tendencyEchart" id="tendencyEchart"></div>
    </section>
  </article>
</template>

<script>
import moment from 'moment'
export default {
  components: {},
  data() {
    return {
      navList: [
        {
          label: '活动申请',
          value: 'activity',
          bgColor: '#e87a55',
          icon: require('assets/img/active.png'),
          pageTurn: '/managementActivities/activityList',
          type: 'activity',
          num: ''
        },
        {
          label: '读者预约',
          value: 'readerDate',
          bgColor: '#24B1C5',
          icon: require('assets/img/date.png'),
          pageTurn: '/ReaderLnteraction/pavilionList',
          type: 'reservation',
          num: ''
        },
        {
          label: '志愿者申请',
          value: 'volunteer',
          bgColor: '#57D78A',
          icon: require('assets/img/apply.png'),
          pageTurn: '/VolunteerManagement/volunteerList',
          type: 'volunteer',
          num: ''
        },
        {
          label: '意见反馈',
          value: 'readerMessage',
          bgColor: '#EDB560',
          icon: require('assets/img/message.png'),
          pageTurn: '/ReaderComments/ReaderList',
          type: 'feedback',
          num: ''
        }
        // {
        //   label: "读者反馈",
        //   value: "feedback",
        //   bgColor: "rgba(213, 87, 78, 0.1)",
        //   icon: require("assets/img/pageNavIconA.png"),
        //   pageTurn: "/feedbackManage/feedbackList",
        // },
        // {
        //   label: "读者办证",
        //   value: "user",
        //   bgColor: "rgba(78, 78, 213, 0.1)",
        //   icon: require("assets/img/pageNavIconB.png"),
        //   pageTurn: "/userManage/userList/addUser",
        // },
        // {
        //   label: "图书采编",
        //   value: "addBook",
        //   bgColor: "rgba(78, 213, 192, 0.1)",
        //   icon: require("assets/img/pageNavIconC.png"),
        //   pageTurn: "/bookManage/bookList/add",
        // },
        // {
        //   label: "图书借阅",
        //   value: "borrowBook",
        //   bgColor: "rgba(213, 167, 78, 0.1)",
        //   icon: require("assets/img/pageNavIconD.png"),
        //   pageTurn: "/bookManage/borrowBook",
        // },
        // {
        //   label: "图书归还",
        //   value: "returnBook",
        //   bgColor: "rgba(112,191,239,0.15)",
        //   icon: require("assets/img/pageNavIconE.png"),
        //   pageTurn: "/bookManage/returnBook",
        // },
      ],
      platform: '', //展示平台
      datatime: 2021, //选择时间
      platformList: [
        {
          label: '馆网',
          value: 1
        }
      ],
      datatimeList: [
        {
          label: '2021',
          value: 2021
        }
      ],
      web_num: {},
      wx_num: {}
    }
  },
  activated() {
    this.gettime()
    this.getNum()
    this.getNum2()
    
  },
  activated() {},
  mounted() {
  },
  computed: {
    doorStatusFilter() {
      let arr = this.doorStatus.filter(
        item => this.presentDoor.status - 0 === item.value - 0
      )
      return arr[0]?.label || '正常运行中'
    }
  },
  methods: {
    gettime() {
      let time=[]
      let tiem1 = new Date('2021')
      let tiem2 = new Date()
      let a = moment(tiem1).format('YYYY')
      let b = moment(tiem2).format('YYYY')
      for (let i = a; i <= b; i++) {
        time.push({
          label: `${i}`,
          value: i
        })
      }
      this.datatime=b
      this.datatimeList=time
    },
    timsfa(){
      this.getNum()
    },
    //公众号
    async getNum() {
      try {
        let res = await this.request({
          url: '/admin/index/accessStatistics',
          method: 'get',
          loading: true,
          data: {
            year: this.datatime,
            month: ''
          }
        })
        if (res) {
          this.wx_num = res.content.wx_num
          this.web_num = res.content.web_num
          this.echars_init()
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    //获取首页数据统计
    async getNum2() {
      return
      try {
        let res = await this.request({
          url: '/admin/index/index',
          method: 'get',
          loading: false,
          data: {}
        })
        if (res) {
          console.log(res)
          res.content
          for (let key in res.content) {
            this.navList.map((item, index) => {
              if (item.type == key) {
                return (item.num = res.content[key])
              }
            })
          }
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    timeFormat(fn) {
      let status = this.timeSlotValidator(
        this.filterData.start_time,
        this.filterData.end_time
      )
      status && fn()
    },
    selectDoor(door) {
      this.presentDoor = door
    },
    // 趋势图
    echars_init() {
      const root = document.getElementById('tendencyEchart')
      const chartDom = root
      const option = {
        color: ['#f44'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.web_num.time,
            axisTick: {
              alignWithLabel: false
            },

            show: true
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true
            }
          }
        ],

        series: [
          {
            name: 'web端访问量',
            type: 'bar',
            barWidth: '19',
            data: [...this.web_num.count],
            itemStyle: {
              normal: {
                // 配置柱状图颜色
                color: function() {
                  return '#5FA9F8'
                }
              }
            }
          },
          {
            name: '微信端问量',
            type: 'bar',
            barWidth: '19',
            data: [...this.wx_num.count],
            itemStyle: {
              normal: {
                // 配置柱状图颜色
                color: function() {
                  return '#5FA9F8'
                }
              }
            }
          }
        ]
      }
      chartDom && this.$echarts.init(chartDom).setOption(option)
    },
    fuunto(path) {
      this.$router.push({
        path: path
      })
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
